<template>
	<!-- 个人中心 -->
	<view class="container">
		<view class="contain">
			<view class="contain_public contain_first">
				<text>头像</text>
				<!-- <u-avatar size="50" :src="form.avatar"></u-avatar> -->
				<view class="user" @tap="uploadFile">
					<image class="avatar" :src="userInfo.avatar"></image>
				</view>
			</view>
			<view class="contain_public contain_second">
				<text>昵称</text>
				<input class="input_style" v-model.trim="userInfo.nickname" placeholder="请填写昵称" />
			</view>
      <view class="contain_public contain_second">
      	<text>电话</text>
      	<input class="input_style" disabled v-model.trim="userInfo.mobile" placeholder="请填写昵称" />
      </view>
      <view class="contain_public contain_second">
      	<text>ID</text>
      	<input class="input_style" disabled v-model.trim="userInfo.my_invite_code" placeholder="请填写昵称" />
      </view>
		<!-- 	<view class="contain_public contain_second">
				<text>生日</text>
				<picker v-if="!userInfo.birthday" class="input_style" mode="date" @change="bindDateChange">
					<input disabled v-model.trim="userInfo.birthday" placeholder="请选择生日" />
				</picker>
				<input v-if="userInfo.birthday" class="input_style" disabled v-model.trim="userInfo.birthday" />
			</view> -->
		</view>
		<view class="submit">
		  <view class="submit-btn" @tap="addUserInfo">更新</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {	}
			}
		},
		onLoad() {
			this.userInfo = vk.getVuex('$user.userInfo')
		},
		methods: {
			bindDateChange: function(e) {
				this.form.birthday = e.detail.value
			},
      uploadFile() {
        let that = this
        uni.chooseImage({
          count: 1,
          success(res) {
            console.log(res);
            if (res.tempFilePaths.length > 0) {
              let filePath = res.tempFilePaths[0]
        
              // callback方式，与promise方式二选一即可
              uniCloud.uploadFile({
                filePath: filePath,
                cloudPath:  new Date().getTime()+'.jpg',
                onUploadProgress: function(progressEvent) {
                  console.log(progressEvent);
                  var percentCompleted = Math.round(
                    (progressEvent.loaded * 100) / progressEvent.total
                  );
                },
                success(res) {
                  console.log(res, 'res----')
                  that.userInfo.avatar = res.fileID
                },
                fail() {},
                complete() {}
              });
        
            }
          }
        });
      },
      addUserInfo() {
        vk.callFunction({
          url: 'user/kh/updateUser',
          title: '加载中...',
          data: {
            avatar: this.userInfo.avatar,
            nickname: this.userInfo.nickname
          },
          success: (info) => {
            vk.toast('更新成功', 'none')
            uni.navigateBack()
          }
        })
      }
		}
	}
</script>

<style scoped lang="scss">
.submit {
      position: fixed;
      left: 0;
      bottom: calc(var(--safe-area-inset-bottom) + 40rpx);
      width: 100%;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      &-btn {
        width: 730rpx;
        height: 74rpx;
        line-height: 74rpx;
        background-color: #005ECD;
        border-radius: 100rpx;
        text-align: center;
        color: #fff;
        font-family: PingFang SC;
        font-size: 26rpx;
        font-style: normal;
        font-weight: 500;
      }
    }
.user {
    width: 100rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .avatar {
	width: 100%;
	height: 100%;
  }
  #user {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
	.container {
		padding: 24rpx 30rpx;

		.contain {
			padding: 20rpx 30rpx;
			border-radius: 18rpx;
			background-color: #fff;
			font-size: 26rpx;

			.contain_public {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #D9D9D9;

				.input_style {
					width: 80%;
					text-align: right;
          flex: 1;
				}
			}

			.contain_first {
				padding: 21rpx 0;
			}

			.contain_second {
				padding: 27rpx 0;
			}
		}

		.contain_bottom_fixed2 {
			margin: 18rpx 30rpx;

			/deep/.u-button.data-v-3bf2dba7 {
				height: 74rpx;
			}
		}
	}
</style>
